<template>
  <div style="padding:10px;">
    <div style="position: fixed; top:10px; width:240px;padding-right: 20px; z-index: 99; background-color: white">
      <el-radio-group size="small" v-model="settingType" >
        <el-radio-button label="1" >投票人</el-radio-button>
        <el-radio-button label="2" >投票对象</el-radio-button>
        <el-radio-button label="3" >活动</el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 5px; margin-bottom: 50px;">
      <div v-if="settingType==1" class="list">
        <div style="position: fixed; z-index: 99; top:60px; right:10px; background-color: white;">
          <el-button type="primary" size="mini" :loading="loading" @click="saveVoteUser()">保存</el-button>
        </div>
        <div style="padding: 10px; font-weight: bold">总人数：{{getAllUserCount().totalCount}}人， 当前可投：{{getAllUserCount().canVoteCount}}人</div>
        <div v-for="(p, i) in voteUsers">
          <div style="padding: 10px">
            <label @change="selectDeptAllUser(p)">
              <input type="checkbox" id="label" v-model="p.canVote" >{{p.name}} ({{p.list.length}}人)
            </label>
<!--            <el-tag style="width:100px; text-align: center" size="large"></el-tag>-->
          </div>
          <table  class="list">
            <tr  v-for="(item,index) in p.list">
              <td v-if="isPC()" style="width:50px;">
                <el-avatar shape="circle" size="small" :src="item.avatar"></el-avatar>
              </td>
              <td>
                {{item.name}}
              </td>
              <td>
                {{item.position}}
              </td>
              <td>
                <el-checkbox v-model="item.canVote">可投</el-checkbox>
              </td>
              <td style="min-width:100px">
                <el-input-number style="width:90px;" :min="0" size="mini" v-model="item.orinTicket"></el-input-number>
              </td>
              <td style="text-align: right">
                已投{{item.voteTicket}}票
              </td>
            </tr>
          </table>
        </div>

      </div>
      <div v-if="settingType==2" >
        <el-button style="position: fixed; z-index: 99; top:60px; right:10px;" type="primary" size="mini" :loading="loading" @click="selectDingUsers()">添加被投票人</el-button>
        <table  class="list" style="padding-top: 30px;">
          <tr  v-for="(item,index) in voteTargets">
            <td>
              {{index+1}}
            </td>
            <td>
              <el-avatar shape="circle" size="small" :src="item.img"></el-avatar>
            </td>
            <td>
              {{item.name}}
            </td>
            <td>
              {{item.description}}
            </td>
            <td>
              <i class="el-icon-delete" style="cursor: pointer" @click="removeTarget(item)"></i>
            </td>
          </tr>
        </table>
      </div>
      <div v-if="settingType==3" >
        <el-form ref="form" :model="voteInfo" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="voteInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="活动状态">
            <el-radio-group v-model="voteInfo.status">
              <el-radio :label="0">未开始</el-radio>
              <el-radio :label="1">进行中</el-radio>
              <el-radio :label="2">已结束</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="结果公示">
            <el-radio-group v-model="voteInfo.publicResult">
              <el-radio :label="false">不公示</el-radio>
              <el-radio :label="true">公示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="投给自己">
            <el-radio-group v-model="voteInfo.voteSelf">
              <el-radio :label="false">不允许</el-radio>
              <el-radio :label="true">允许</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动公告">
            <el-input type="textarea" v-model="voteInfo.notice"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini"  type="primary" @click="saveVoteBase()" >保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import voteMixin from '@/mixins/vote'

  export default {
    data () {
      return {
        settingType: 3,
        voteInfo: {},
        voteTargets: [],
        voteUsers:[],
        loading : false,
        dialogVisible: false
      }
    },
    mixins: [dingMixin,voteMixin],
    activated () {
      this.getVoteTargets();
      this.getVoteUser();
    },
    created(){
      this.run_dd_config();
      this.queryVote();
    },
    methods: {
      getAllUserCount(){
        let totalCount = 0
        let canVoteCount = 0
        for(let p of this.voteUsers) {
          for(let u of p.list){
            totalCount++
            if(u.canVote)
              canVoteCount++
          }
        }
        return {totalCount:totalCount,canVoteCount:canVoteCount}
      },
      selectDeptAllUser(p){
        for(let item of p.list){
          item.canVote = p.canVote
        }
        this.$forceUpdate()
      },
      saveVoteUser(){
        let form = [];
        for(let p of this.voteUsers){
          form.push(...p.list);
        }
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/vote/voteuser/saveBatch'),
          method: 'post',
          data: this.$http.adornData({list: form})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({message: '操作成功', type: 'success', duration: 1500})
            }
          }
        ).finally(()=>{
          this.loading=false
        })
      },
      getVoteUser(){
        this.$http({
          url: this.$http.adornUrl('/vote/voteuser/list'),
          method: 'get',
          params: this.$http.adornParams({voteId: this.voteId})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.voteUsers = data.list
            }
          }
        )
      },
      selectDingUsers(){
        this.complexPicker(100, [] ,[]).then(
          data=>{
            //data;
            console.log(JSON.stringify(data));
            this.saveVoteTarget(data);
          }
        )
      },
      saveVoteTarget(avatars){
        this.loading = true
        let form = [];
        for(let a of avatars){
          form.push({name:a.name, voteId: this.voteId, img: a.avatar, identity: a.emplId});
        }
        this.$http({
          url: this.$http.adornUrl('/vote/votetarget/saveBatch'),
          method: 'post',
          data: this.$http.adornData({list: form})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.voteTargets.push(...data.list);
              //console.log(JSON.stringify(this.voteTargets))
              this.$message({message: '操作成功', type: 'success', duration: 1500})
              this.$forceUpdate()
            }
          }
        ).finally(()=>{
          this.loading=false
        })
      },
      getVoteTargets(){
        this.$http({
          url: this.$http.adornUrl('/vote/votetarget/list'),
          method: 'get',
          params: this.$http.adornParams({voteId: this.voteId})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.voteTargets = data.list
            }
          }
        )
      },
      removeTarget(item){
        this.$confirm(`确定删除${item.name}吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/vote/votetarget/delete'),
            method: 'post',
            data: this.$http.adornData([item.id], false)
          }).then(({data}) => {
              if (data && data.code === 0) {
                this.voteTargets = this.voteTargets.filter(x => x.id != item.id)
              }
            }
          )
        })
      },
      queryVote(){
        console.log('voteId:'+ this.voteId)
        this.$http({
          url: this.$http.adornUrl('/vote/votebase/info/'+this.voteId),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.voteInfo = data.voteBase
            }
          }
        )
      },
      saveVoteBase(){
        this.$http({
          url: this.$http.adornUrl(`/vote/votebase/update`),
          method: 'post',
          data: this.$http.adornData(this.voteInfo)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({message: '操作成功', type: 'success', duration: 1500})
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>

  .list{
    width:100%;
    padding: 0px;
    table-layout: fixed;
  }


</style>
